<template>
  <h2>正常情况下两个是一样的, 不废弃仅是为了旧代码的兼容性</h2>
  <div>
    <div class="container case1">
      <div class="box1"></div>
      <div class="box2"></div>
      <div class="label">isolation: auto</div>
    </div>

    <div class="container case2">
      <div class="box1"></div>
      <div class="box2"></div>
      <div class="label">isolation: isolate</div>
    </div>
  </div>
</template>

<style scoped>
.container {
  position: relative;
  width: 220px;
  height: 120px;
  margin-bottom: 40px;
  border: 1px solid #333;
  padding: 10px;
}

/* 第一个盒子，带阴影 */
.box1 {
  width: 100px;
  height: 100px;
  background: #09c;
  box-shadow: 10px 0 10px rgba(0,0,0,0.5);
  position: relative;
  z-index: 1;
  opacity: 0.7;
}

/* 第二个盒子，半透明红色，叠加到box1右边 */
.box2 {
  width: 100px;
  height: 100px;
  background: rgba(255,0,0,0.7);
  position: absolute;
  top: 10px;
  left: 90px;
  z-index: 2;
  /* 注意这里我们不使用 mix-blend-mode */
}

/* 标签 */
.label {
  position: absolute;
  bottom: 5px;
  left: 10px;
  font-weight: bold;
  color: #222;
}

/* 区别 */
.case1 {
  isolation: auto;
}

.case2 {
  isolation: isolate;
}
</style>
